<template>
  <div>
    <!--    面包屑-->
    <Breadcrumb>
      <BreadcrumbItem>机器管理</BreadcrumbItem>
      <BreadcrumbItem>机器列表</BreadcrumbItem>
    </Breadcrumb>

    <!--    搜索表单-->
    <div>
      <Form ref="formInline" :model="request" inline>
        <FormItem>
          机器名: <Input type="text" clearable style="width: 120px;"/>
        </FormItem>
        <FormItem>
          地址: <Input type="text" clearable style="width: 120px;"/>
        </FormItem>
        <FormItem>
          摄像头状态:
          <Select style="width: 120px;" v-model="selectItme">
            <Option value="1">请选择</Option>
          </Select>
        </FormItem>
      </Form>
      <Form ref="formInline" :model="request" inline>
        <FormItem>
          机器状态:
          <Select style="width: 120px;" v-model="selectItme">
            <Option value="1">请选择</Option>
          </Select>
        </FormItem>
        <FormItem>
          离线状态:
          <Select style="width: 120px;" v-model="selectItme">
            <Option value="1">请选择</Option>
          </Select>
        </FormItem>
        <FormItem>
          门锁状态:
          <Select style="width: 120px;" v-model="selectItme">
            <Option value="1">请选择</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="success" @click="$router.push('/device/addDevice')" style="margin-right: 10px">添加机器</Button>
          <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>
        </FormItem>
      </Form>
    </div>

    <!--    说明-->
    <div>
      <span>注释：（仅作为解释说明）
1.机器名称要支持模糊查找
   地址模糊查找
2.点击字段名按照相应字段排序 </span>
    </div>

    <!--    表格-->
    <div>
      <Table :columns="columns1" :data="data" :height="height">
        <!--        上传文件是否成功的判断-->
        <template slot-scope="{ row }" slot="option">
          <Button type="primary" v-hasPermission="['38']" size="small" style="margin-right: 5px"
                  @click="$router.push('/device/editDevice')">查看详情
          </Button>
          <Button type="error" v-hasPermission="['38']" size="small" style="margin-right: 5px" @click="remove(row)">删除
          </Button>
          <Button class="button" size="small" v-hasPermission="['38']" style="margin-right: 5px"
                  :type="row.status === 2?'success':'error' " @click="setStatus(row)">
            <span v-if="row.status === 1">禁用</span>
            <span v-else>启用</span>
          </Button>
          <Button type="primary"
                  v-hasPermission="['38']"
                  size="small"
                  style="margin-right: 5px"
                  @click="openModel(row)">
            查看视频
          </Button>
        </template>
      </Table>
    </div>

    <!--分页功能-->
    <div style="display: flex; justify-content: center;">
      <Page style="display: flex;justify-content: center;margin-top: 24px;"
            :total="page.count"
            :page-size="20"
            :page-size-opts="[20,30,40,50,100]"
            show-elevator
            show-sizer
            show-total
            @on-change="handleCurrentChange"
            @on-page-size-change="handleSizeChange"/>
    </div>

    <Modal v-model="modal1" title="机器名 - 广告列表" @on-ok="confirm" @on-cancel="cancel" :mask-closable="false">
      <Table :columns="columns2" :data="modelData">
      </Table>
      <div slot="footer"></div>
    </Modal>

  </div>
</template>

<script>
export default {
  data() {
    return {
      // --------------------- 弹窗 --------------------------
      modal1: false,
      columns2: [
        {
          title: "序号",
          key: "device_name",
          minWidth: 150,
          align: "center"
        },
        {
          title: "广告视频id",
          key: "device_name",
          minWidth: 150,
          align: "center"
        },
        {
          title: "广告标题",
          key: "device_name",
          minWidth: 150,
          align: "center"
        }],
      modelData: [],
      //------------------------------
      selectItme: '1',
      params: {
        device_time: [],
        status: 1,
        user_id: "",
        order_id: "",
        activity_id: "",
        page: 1,
        limit: 10,
      },
      total: 0,
      page: {},
      height: 200,
      modal3: false,
      data1: [
        {
          id: 1,
          title: "机器组3",
        },
        {
          id: 2,
          title: "机器组4",
        },
      ],
      request: {
        device_number: "",
        page: 1,
      },
      columns1: [
        {
          title: "机器名",
          key: "device_name",
          minWidth: 150,
          align: "center"
        },
        {
          title: "机器组经理",
          key: "device_name",
          minWidth: 150,
          align: "center"
        },
        {
          title: "所属机器组",
          key: "device_name",
          minWidth: 150,
          align: "center"
        },
        {
          title: "地址",
          key: "device_name",
          minWidth: 150,
          align: "center"
        },
        {
          title: "所属门店",
          key: "device_name",
          minWidth: 150,
          align: "center"
        },
        {
          title: "机器状态",
          key: "device_id",
          minWidth: 150,
          align: "center"
        },
        {
          title: "摄像头a",
          key: "device_code",
          minWidth: 150,
          align: "center"
        },

        {
          title: '摄像头b',
          key: "device_temperature",
          minWidth: 150,
          align: "center",
        },
        {
          title: "门锁",
          key: "device_status",
          minWidth: 150,
          align: "center",
        },
        {
          title: "温度",
          key: "submit_time",
          minWidth: 150,
          align: "center",
        },
        {
          title: "是否离线",
          key: "submit_time",
          minWidth: 150,
          align: "center",
        },
        {
          title: "创作时间",
          key: "submit_time",
          minWidth: 150,
          align: "center",
        },
        {
          title: "操作",
          slot: "option",
          minWidth: 150,
          align: "center",
        }
      ],
      data: [
        {
          device_name: 'B6790',
          device_id: '53545',
          device_code: 18,
          device_temperature: '37.5',
          device_status: '正常',
          submit_time: '2021-09-18'

        },
        {
          device_name: 'B36460',
          device_id: '887',
          device_code: 19,
          device_temperature: '37.5',
          device_status: '异常',
          submit_time: '2021-09-19'
        }
      ],
      role_id: null,
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    openModel(row) {
      console.log(row)
      this.modal1 = true
    },
    confirm() {
      this.modal1 = false
      this.$Message.success("操作成功");
    },
    cancel() {

    },
    // ------------------------------------------------------
    init() {
      this.axios.post("order/order_list", this.params).then((res) => {
        console.log("this.params: ", this.params);
        if (res.code === 1) {
          console.log(res);
          this.total = res.data.count;
          this.tableData = res.data.list;
        }
      });
    },
    search() {
      this.params.page = 1;
      this.init();
    },
    add() {
      this.modal1 = true;
    },
    setStatus(id, status) {
      var text = "确定要" + (status === 1 ? "启用" : "禁用") + "此机器组么？";
      this.$Modal.confirm({
        title: text,
        onOk: () => {
          this.$Message.success("操作成功");
        },
        onCancel: () => {
        },
      });
    },
    lists() {
    },
    timechange(val) {
      console.log(val);
    },
    handleSizeChange(val) {
      this.request.page = 1;
      this.request.limit = val;
      this.lists();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.init();
    },
  },
};
</script>

